在 src/components 目录下创建一个新的组件文件 DocumentViewer.vue，并添加以下内容：

<template>
  <div class="document-container" direction="vertical" alignment="flex-start">
    <div class="document-header">
      <h1>solo π功能模块介绍</h1>
      <div></div>
      <p class="author">陈蔓</p>
      <p class="date">2024/08/23</p>
    </div>
    <div class="document-body">
      <h3>1.1.创建项目</h3>
      <p style="text-indent: 2em;">
        通过上传JMX脚本，快速创建项目。项目名称尽量使用英文、数字命名，且注意上传的脚本需要满足以下几点要求，否则会影响测试的执行及测试的结果。
      </p>
      <p style="text-indent: 4em;">1)请上传脚本压缩包(.zip/.rar/.7z)，压缩包内请勿嵌套多层目录，所有脚本与参数化文件放在同一级目录下；</p>
      <img src="@/assets/helpfile/2.1_1.png" alt="图1" class="document-image" slot=error />
      <p style="text-indent: 4em;">2)JMX脚本文件名以TC开头，并与脚本中的事务控制器名一致；</p>
      <p style="text-indent: 4em;">3)脚本中保留“查看结果树”组件，并将Name改为XMLJTL，文件名保持不为空；</p>
      <p style="text-indent: 4em;">4)若需要开启资源监控，JMX脚本中需要添加两个PerMon Metrics Collector插件，并分别命名为“Res_CPU”、“Res_Memory”；</p>
      <p style="text-indent: 4em;">5)引用参数化文件时使用相对引用。</p>
      <img src="@/assets/helpfile/2.1_2.png" alt="图2" class="document-image" slot=error />
      <h3>1.2.负载机管理</h3>
      <p style="text-indent: 2em;">
        添加负载机并对其进行管理。主要功能包括新增负载机，编辑负载机信息、删除负载机、查询负载机，以及负载机环境的初始化、启动负载机的jmeter-server进程、检查负载机的jmeter-server是否成功启动、启动或禁用负载机。
      </p>
      <img src="@/assets/helpfile/2.1_3.png" alt="图1" class="document-image" slot=error />
      <h4>1.2.1.新增负载机</h4>
      <p style="text-indent: 2em;">
        添加新的负载机，默认为Linux系统，目前仅支持Linux系统的负载机，输入信息后可测试是否能够成功连接；
      </p>
      <img src="@/assets/helpfile/2.1_4.png" alt="图1" class="document-image" slot=error />
      <h4>步骤四（可选）：配置邮件信息</h4>
      <p>
        项目管理 -> 脚本管理 -> 选择自己的项目 - > 邮件配置 -> 设置邮件信息 -> 鼠标点击【保存】。
      </p>
      <img src="@/assets/helpfile/图片4.png" alt="图1" class="document-image" slot=error />
      <h4>步骤五：添加负载机</h4>
      <p>
        负载机管理 -> 负载机管理 -> 鼠标点击【新增负载机】-> 输入负载机IP、用户名、密码，点击【测试链接】 ，成功连接后关闭窗口 -> 新添加的负载机的状态点击【启用】按钮 -> 点击【初始化】 ->
        初始化成功后点击【启动】-> 启动成功后，点击【检查】，再次确认负载机已成功启动。
      </p>
      <img src="@/assets/helpfile/图片5.png" alt="图1" class="document-image" slot=error />
      <h4>步骤六：执行测试</h4>
      <p>
        项目管理 -> 执行测试 -> 选择自己的项目 -> 选择测试机，选择刚刚添加的负载机 -> 选择是否开启资源监控（可选，需要确保脚本符合规范）-> 点击【执行测试】。
      </p>
      <img src="@/assets/helpfile/图片6.png" alt="图1" class="document-image" slot=error />
      <h4>步骤七：查看报告</h4>
      <p>
        项目管理 -> 查看报告 -> 选择项目，点击【查询报告】。
      </p>
      <img src="@/assets/helpfile/图片7.png" alt="图" class="document-image" slot=error />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentViewer'
}
</script>

<style scoped>
.document-container {

  margin: 0 auto;
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  /* 纯白色背景 */
  padding: 20px;
  /* 为容器添加一些内边距 */
}

.document-header {
  text-align: center;
  margin-bottom: 20px;
}

.document-header h1 {
  font-size: 2em;
}

.document-header .author,
.document-header .date {
  font-size: 1em;
  color: #555;
}

.document-body {
  line-height: 1.6;
}

.document-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

h2 {
  margin-top: 30px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}
</style>
